<template>
    <div class="container">
        <!-- 背景层   -->
        <div class="bgLayer">
            <img :src="bgImg" class="bgImg" ref="bgImg">
            <div class="bgMain">
                <div class="bgMain-t fw-8" :class="animateList[0]"  flex="main:center">
                    {{$FS.USER.H5.TITLE}}
                </div>
                <div class="bgMain-n fw-8 " :class="animateList[1]"  flex="main:center">
                    {{$FS.USER.H5.NAME}}
                </div>
                <div class="bgMain-s" @click="seeInfo">
                    <div class="sText sTitle" :class="animateList[2]" >Article:{{articleInit['articleCount']}}p</div>
                    <div class="sText " :class="animateList[3]" >Words：{{articleInit['words']}}</div>
                    <div class="sText " :class="animateList[4]" >Views：{{articleInit['pViews']}}</div>
                    <div class="sText " :class="animateList[5]" >hits：{{articleInit['hits']}}</div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import { articleNum } from '@/api/apis/auth.js'
    export default {
        name: "home",
        data() {
            return {
                bgImg:require('@/assets/image/bizhi_12.jpg'),
                articleInit:{},
                animateList:[
                    'animate__animated animate__flipInX delay-2',
                    'animate__animated animate__flipInX delay-6',
                    'animate__animated  animate__bounceInLeft delay-7',
                    'animate__animated animate__fadeInLeftBig delay-10',
                    'animate__animated animate__fadeInLeftBig delay-12',
                    'animate__animated animate__fadeInLeftBig delay-14',
                ],

            }
        },
        created() {
            this.articleNum();
        },
        mounted() {

        },
        destroyed() {

        },
        computed: {},
        methods: {
            articleNum(){
                articleNum().then(res=>{
                    let { code,data } = res;
                    if(code === 20000 ){
                        this.articleInit = data;
                    }
                })
            },
            seeInfo(){
                this.$router.push('/articleH5')
            },
        },
    }
</script>
<style scoped lang='scss'>
    .container{
        @include boxBase();
        position: absolute;
        .bgLayer{
            position: absolute;
            left: 0;
            top: 0;
        }
        .bgLayer{
            @include boxBase();
            overflow: hidden;
            z-index: 10;
            .bgImg,.bgMain{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
            .bgImg{
                @include boxBase();
                object-fit:cover;
                z-index: 10;
                transition: width,height .3s linear;
            }
            .bgMain{
                @include boxBase();
                z-index: 100;
                &-t{
                    font-size: 1.12rem;
                    font-family:Lato,fantasy;
                    color: #414141;
                    margin-top: 1.73rem;
                }
                &-n{
                    font-size:.8rem;
                    font-family: Lato;
                    color: #414141;
                    margin-top: .66rem;
                }
                &-s{
                    width: 4.13rem;
                    position: absolute;
                    left: .64rem;
                    bottom: 2.454rem;
                    .sText{
                        font-size: .32rem;
                        color: rgba(227, 227, 227, 0.4);
                        margin-bottom: .12rem;
                    }
                    .sTitle{
                        font-size:0.533rem;
                        border-bottom: 1px solid rgba(227, 227, 227, 0.4);
                    }
                }
            }

        }
        .delay-2 {
            animation-delay:.2s
        }
        .delay-6 {
            animation-delay:.6s
        }
        .delay-7 {
            animation-delay:.7s
        }
        .delay-10 {
            animation-delay:1s
        }
        .delay-12 {
            animation-delay:1.2s
        }
        .delay-14 {
            animation-delay:1.4s
        }
    }
</style>
